<template>
    <div class="teachers-wrapper" data-200-center-top="transform: scale(0.6); opacity: 0"
        data-center-center="transform: scale(1); opacity: 1">
        <div class="item">
            <div class="introduce">
                <img src="https://asset.greedyai.com/revision/teams-9.png" alt="">
                <div class="name-or-position">
                    <div class="name">张和洪</div>
                    <div class="position">
                        <div class="tag">教授</div>
                        <div class="tag">博士生导师</div>
                        <div class="tag">闽江学者</div>
                    </div>
                </div>
            </div>
            <div class="desc">
                先后在新加坡、瑞士、澳大利亚等国家知名高校进行联培、访学等交流活动。2020年8月入职福州大学计算机与大数据学院，先后入选福州大学“海外旗山学者计划”，福建省高层次引进人才计划，福建省“闽江学者特聘教授计划”。
            </div>
        </div>
        <div class="item">
            <div class="introduce">
                <img src="https://asset.greedyai.com/revision/teams-11.png" alt="">
                <div class="name-or-position">
                    <div class="name">王五</div>
                    <div class="position">
                        <div class="tag">副教授</div>
                        <div class="tag">硕士生导师</div>
                    </div>
                </div>
            </div>
            <div class="desc">
                新东方AI研究院高性能负责人，百度深度学习技术平台部Paddle资深架构师，小爱同学、小雅、小豹智能音箱智能语音系统。中科院大规模GPU+FPGA分布式异构计算系统。Paddle
                集合通信框架及PLSC开发。
            </div>
        </div>
    </div>
</template>

<script setup>
</script>

<style scoped>
.teachers-wrapper {
    display: flex;
    /* 使子元素填充垂直方向的可用高度，实现高度相等的效果 */
    align-items: stretch;
    justify-content: space-around;
    flex-wrap: wrap;
}

.item {
    width: 40%;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(209, 213, 219, 0.3);
    box-shadow: 3px 3px 5px #ccc, 0 0 30px #eee inset;
    padding: 28px 40px;
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.name {
    font-weight: bold;
    font-size: 22px;
}

.position {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 10px 0;
}

.position .tag {
    background-color: #00AFFB;
    color: #fff;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 14px;
    margin: 0 10px;
}

.desc {
    font-size: 14px;
}

.btn-see-more {
    border: 1px solid #00d1ff;
    border-radius: 20px;
    width: 100px;
    margin-top: 20px;
    transition: .5s;
    height: 30px;
}

.btn-see-more:hover {
    cursor: pointer;
    background-color: #ECF5FF;
}

.btn-see-more span {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    background-image: linear-gradient(#00d1ff, #005af1);
    color: transparent;
    -webkit-background-clip: text;
    font-size: 14px;
}
</style>